import 'nprogress/nprogress.css'

import React, { useEffect } from 'react'

import NProgress from 'nprogress'
import { useLocation } from 'react-router-dom'

const RouterProgress: React.FC = () => {
  const location = useLocation()

  useEffect(() => {
    const handleStart = () => NProgress.start()
    const handleStop = () => NProgress.done()

    // Start the progress bar
    handleStart()

    // Delay stopping the progress bar to simulate a load time
    setTimeout(handleStop, 300)

    // Cleanup function to ensure the progress bar is stopped
    return () => {
      handleStop()
    }
  }, [location])

  return null
}

export default RouterProgress
